<template>
  <a :href="detailsUrl">
    <div class="book-card">
      <div class="thumb" @click.stop="previewImage(book)">
        <image :src="book.image" alt="" mode="aspectFill" class="img"></image>
      </div>
      <div class="detail">
        <div class="row">
          <div class="right">
            {{book.id}}
          </div>
          <div class="letf">
            {{book.title}}
          </div>
        </div>
        <div class="row">
          <div class="right">
            作者：王军
          </div>
          <div class="letf">
            浏览量：{{book.count}}
          </div>
        </div>
        <div class="row">
          <div class="right">
            出版社：黄瓜视频
          </div>
          <div class="letf">
            添加人：{{book.user_info.nickName}}
          </div>
        </div>
      </div>
    </div>
  </a>
</template>

<script>
export default {
  props: ['book'],
  computed: {
    detailsUrl () {
      return '/pages/details/main?id=' + this.book.id
    },
    
  },
  methods: {
    previewImage (data) {
      wx.previewImage({
        current: data.image,
        urls:[data.image]
      })
    }
  }
}
</script>

<style scoped>
.book-card {
  padding: 5px;
  overflow: hidden;
  margin: 0 5px;
  font-size: 24rpx;
}
.thumb {
  width: 90px;
  height: 90px;
  float: left;
  margin: o auto;
  overflow: hidden;
}
.img {
  max-width: 100%;
  max-height: 100%;

}
.detail {
  margin-left: 100px;
}
.row {
  line-height: 20px;
  margin-bottom: 3px;
}
.right {
  float: right;
}
.left {
  margin-right:80; 
}
</style>
